<template>
  <div class="infinite-container">
    <div class="topHandler flex">
      <div @click="tabClick(1)" :class="{activeLine: activeTab == 1}">
        <span class="tabText" :class="{activeText: activeTab == 1}">{{selDeptName}}</span>
        <img
          src="../../assets/images/icon_arrowdown_gray.png"
          alt
          class="dropDownIcon"
          v-if="activeTab != 1"
        />
        <img src="../../assets/images/icon_arrowup_green.png" alt class="dropDownIcon" v-else />
        <ul v-show="showDropDownMenu">
          <li
            v-for="(item,index) in deptList"
            :key="index"
            @click="selectDept(item)"
          >{{item.consultDeptName}}</li>
        </ul>
      </div>
      <div @click="tabClick(2)" :class="{activeLine: activeTab == 2}">
        <div>
          <span class="tabText" :class="{activeText: activeTab == 2}">筛选</span>
          <img
            src="../../assets/images/icon_arrowdown_gray.png"
            alt
            class="dropDownIcon"
            v-if="activeTab != 2"
          />
          <img src="../../assets/images/icon_arrowup_green.png" alt class="dropDownIcon" v-else />
        </div>
      </div>
      <div @click="tabClick(3)" :class="{activeLine: activeTab == 3}">
        <div>
          <span class="tabText" :class="{activeText: activeTab == 3}">排序</span>
          <img
            src="../../assets/images/icon_arrowdown_gray.png"
            alt
            class="dropDownIcon"
            v-if="activeTab != 3"
          />
          <img src="../../assets/images/icon_arrowup_green.png" alt class="dropDownIcon" v-else />
        </div>
      </div>
    </div>
    <div class="mt10"></div>
    <Bs-filter v-show="showBsFilter" @selOk="selOk"></Bs-filter>
    <Bs-sort v-show="showBsSort" @selOk="selSortOk"></Bs-sort>
    <empty v-show="isEmpty"></empty>
    <ul class="doctorList">
      <li
        class="flex flex_vcenter"
        v-for="(item,index) in doctors"
        @click="goSelDoctor(item)"
        :key="index"
      >
        <img v-lazy="item.header" alt />
        <div class="ostatus" v-if="item.isOnline == 1">在线</div>
        <div class="flex_full">
          <div>
            <span class="docName">
              {{item.doctorName||""}}
              <small>{{item.doctorTitle}}</small>
            </span>
            <span class="borderBtn" v-if="item.isImageAbleOpen == 1">咨询</span>
            <span class="borderBtn" v-if="item.isReturnVisit == 1">处方</span>
          </div>
          <div style="padding:5px 0;" class="text-gray">
            <span>{{item.professionalTitle || ""}}</span>
            <span>{{item.deptName || ""}}</span>
          </div>
          <div class="text-gray">
            <span class="goodAt">擅长</span>
            <span>{{item.expert | safeSlice(36)}}</span>
            <span></span>
          </div>
          <div class="text-gray flex flex_between">
            <div>
              <span>接诊量</span>
              <span>{{item.visitingVolume || "暂无"}}</span>
            </div>
            <div>
              <span>评分</span>
              <span class="feeText">{{item.averageScore || 10}}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import empty from "@/components/empty";
import BsFilter from "./BsFilter.vue";
import BsSort from "./BsSort.vue";
import { commonAjaxJson, RESTFUL_API } from "../../api/api";
export default {
  data() {
    return {
      isEmpty: false,
      selDept: "",
      deptList: [],
      switchStatus: false,
      param: {
        consultType: "",
        deptId: "",
        doctorLevel: "",
        orderByType: "",
        type: 1
      },
      doctors: [],
      selModel: 0,
      sortModel: 0,
      activeTab: 1,
      showDropDownMenu: false,
      showBsFilter: false,
      showBsSort: false,
      selDeptName: ""
    };
  },
  mounted() {
    this.deptList = this.$store.state.pageData;
    if (!!this.$route.query.deptName) {
      this.selDeptName = this.$route.query.deptName;
    } else {
      this.selDeptName = "科室";
    }
    if (this.$route.query.deptid) {
      this.selDept = this.$route.query.deptid;
    } else {
      this.selDept = this.deptList[0]["deptId"];
    }
    this.loadData();
  },
  components: {
    empty,
    BsFilter,
    BsSort
  },
  methods: {
    selSortOk(val) {
      console.log(JSON.stringify(val));
      this.showBsSort = false;
      this.param.orderByType = val.sortType.id;
      this.loadData();
    },
    selOk(val) {
      // console.log(JSON.stringify(val))
      this.showBsFilter = false;
      this.param.consultType = val.selTypeData.id;
      this.param.doctorLevel =
        val.doctorLevelData == "" ? "" : val.doctorLevelData;
      this.loadData();
    },
    tabClick(num) {
      this.activeTab = num;
      if (num == 1) {
        this.showDropDownMenu = !this.showDropDownMenu;
        this.showBsFilter = false;
        this.showBsSort = false;
      } else if (num == 2) {
        this.showDropDownMenu = false;
        this.showBsSort = false;
        this.showBsFilter = !this.showBsFilter;
      } else {
        this.showDropDownMenu = false;
        this.showBsSort = !this.showBsSort;
        this.showBsFilter = false;
      }
    },
    changeOnline() {
      this.loadData();
    },
    selectDept(item) {
      this.selDept = item.deptId;
      this.selDeptName = item.deptName;
      this.loadData();
    },
    loadData() {
      this.param.deptId = this.selDept;
      commonAjaxJson(RESTFUL_API.querySearchJmp, this.param, true).then(res => {
        if (res.data.code == 200) {
          this.doctors = res.data.data || [];
          console.log(this.doctors);
          this.isEmpty = !this.doctors.length;
        } else {
          this.isEmpty = true;
        }
      });
    },
    goSelDoctor(item) {
      this.$router.push("/queryOnline/doctorDetail?docid=" + item.doctorId);
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/component";
.tabText {
  color: #777;
}
.infinite-container {
  .borderBtn {
    font-size: 9px;
    padding: 2px 4px;
    color: #ff6600;
    border-color: #ff6600;
  }
  .goodAt {
    font-size: 12px;
    background: #ffac29;
  }
  .text-gray {
    color: #666;
  }
  .docName {
    color: #333;
  }
  @{deep} .mu-switch-label {
    color: #999;
  }
  @{deep} .mu-dropDown-menu-text-overflow {
    text-align: right;
    color: #2abc6d;
  }
  @{deep} .mu-dropDown-menu-icon {
    fill: #2abc6d;
  }
}

.topDeptList {
  padding: 10px 0;
  li {
    width: 20%;
    text-align: center;
    img {
      width: 30px;
    }
  }
  background-color: white;
  margin-top: 44px;
}

.doctorList {
  position: relative;
}

.ostatus {
  width: 42px;
  height: 21px;
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-align: center;
  top: 0;
  right: 15px;
  background: url("../../assets/wzjl/tab_zxwz_zx.png") no-repeat center
    center/100% 100%;
}

.topHandler {
  background-color: white;
  > div:nth-child(1) {
    position: relative;
    ul {
      position: absolute;
      top: 48px;
      max-height: 308px;
      overflow-y: scroll;
      background-color: white;
      z-index: 99;
      li {
        padding: 0 18px;
      }
      border: 1px solid @color-border;
      border-radius: 5px;
      box-shadow: 0 0 10px 3px #efefef;
    }
  }
  > div {
    box-sizing: border-box;
    width: 33.3%;
    padding: 0 10px;
    text-align: center;
    height: 44px;
    line-height: 44px;
    border-bottom: 2px solid transparent;
  }
  > .activeLine {
    border-bottom: 2px solid @color-primary;
  }
}

.underlineClass {
  color: green;
}
.dropDownIcon {
  width: 12px;
  margin-left: 3px;
}
.activeText {
  color: @color-primary;
}
</style>
